<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>类组件</title>
</head>

<h1>类组件</h1>
<ol>
    <li>使用class关键字创建类组件，组件名字首字母大写</li>
    <li>需要继承React.Component</li>
    <li>必须重写render方法，并且有返回</li>
</ol>
<hr />
<div id="demoReact"></div>
<script src="../../node_modules/babel-standalone/babel.min.js"></script>
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">

    class MyCom extends React.Component {

        render() {
            return (
                <div>类组件:{this.props.name}</div>
            )
        }

    }

    // 注意：这里不要使用new <MyCom/>
    let com = <MyCom name="哈哈哈" />

    ReactDOM.render(com, document.getElementById("demoReact"));

</script>

</html>